<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    <script src="/assets/js/jquery.js"></script>
    <script src="/assets/bootstrap/js/popper.min.js"></script>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/assets/css/base.css">
</head>

<body>
    <div class="page">
        <div class="page-title">
            <img src="/images/logo.png" alt="">
            <span>思通数科采集系统浏览器插件</span>
        </div>
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-link active" id="nav-list-tab" data-bs-toggle="tab" data-bs-target="#nav-list" role="tab"
                    aria-controls="nav-list" aria-selected="true">列表解析</a>
                <a class="nav-link" id="nav-detail-tab" data-bs-toggle="tab" data-bs-target="#nav-detail" role="tab"
                    aria-controls="nav-detail" aria-selected="false">详情解析</a>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-list" role="tabpanel" aria-labelledby="nav-list-tab"
                tabindex="0">
                <div class="table_mark mt-4">
                    <table class="table table-bordered list-preview">
                        <thead class="list-thead">

                        </thead>
                        <tbody class="list-tbody">

                        </tbody>
                    </table>
                    <div class="table_empty">暂无数据</div>
                </div>
                <div class="bottom-btns">
                    <button type="button" class="btn btn-primary" id="auto-identify">自动识别</button>
                    <button type="button" class="btn btn-success" id="gather-config">采集配置</button>
                    <!-- <button type="button" class="btn btn-primary" id="grap-dom">抓取数据</button>
                    <button type="button" class="btn btn-danger" id="clear-table">清空数据</button> -->
                    <!-- <button type="button" class="btn btn-success" id="send-data">数据同步</button> -->
                    <!-- <button type="button" class="btn btn-success" id="auto-page">自动翻页</button> -->
                    <!-- <button type="button" class="btn btn-primary" id="jump-page">跳转页面</button> -->
                    <!-- <button type="button" class="btn btn-primary" id="parseHtml">解析html</button> -->
                </div>
            </div>
            <div class="tab-pane fade" id="nav-detail" role="tabpanel" aria-labelledby="nav-detail-tab" tabindex="0">
                <div class="table_mark mt-4">
                    <table class="table table-bordered detail-preview">
                        <thead class="detail-thead">

                        </thead>
                        <tbody class="detail-tbody">

                        </tbody>
                    </table>
                    <div class="table_empty">暂无数据</div>
                </div>
                <div class="mb-3">
                    <label for="" class="form-label">解析的文本：</label>
                    <textarea class="form-control mb-2" id="selectorText-detail" rows="5"></textarea>
                </div>
                <div class="mb-3">
                    <label for="" class="form-label">xpath：</label>
                    <textarea class="form-control" id="xpath-detail" rows="2"></textarea>
                </div>
                <button type="button" class="btn btn-primary mt-3" id="parseXpath">解析xpath</button>
            </div>
        </div>

        <div class="modal fade" id="contentDetailModal" tabindex="-1" aria-labelledby="contentDetailModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title fs-5" id="contentDetailModalLabel" style="font-size: 16px !important;">
                            文本内容
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <textarea class="form-control" id="content-detail" rows="8"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="gatherConfigModal" tabindex="-1" aria-labelledby="gatherConfigModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title fs-5" id="gatherConfigModalLabel" style="font-size: 16px !important;">
                            采集配置
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="flexRadioDefault"
                                    id="flexRadioDefault1">
                                <label class="form-check-label" for="flexRadioDefault1">
                                    xpath采集
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="flexRadioDefault"
                                    id="flexRadioDefault2">
                                <label class="form-check-label" for="flexRadioDefault2">
                                    selector采集
                                </label>
                            </div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="" class="form-label">标题</label>
                            <input type="text" class="form-control" id="" value="">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="" class="form-label">新闻链接</label>
                            <input type="text" class="form-control" id="" value="">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="" class="form-label">新闻图片</label>
                            <input type="text" class="form-control" id="" value="">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="" class="form-label">新闻内容</label>
                            <input type="text" class="form-control" id="" value="">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="" class="form-label">新闻来源</label>
                            <input type="text" class="form-control" id="" value="">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="" class="form-label">发布时间</label>
                            <input type="text" class="form-control" id="" value="">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="submitConfig">确定</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/assets/js/popup.js"></script>
</body>

</html>